import * as React from 'react'
import axios from 'axios'
import Avatar from '@mui/material/Avatar'
import Button from '@mui/material/Button'
import CssBaseline from '@mui/material/CssBaseline'
import TextField from '@mui/material/TextField'
import FormControlLabel from '@mui/material/FormControlLabel'
import Checkbox from '@mui/material/Checkbox'
import Link from '@mui/material/Link'
import Grid from '@mui/material/Grid'
import Box from '@mui/material/Box'
import LockOutlinedIcon from '@mui/icons-material/LockOutlined'
import Typography from '@mui/material/Typography'
import Container from '@mui/material/Container'
import MenuItem from '@mui/material/MenuItem';


const instance = axios.create({
    baseURL: 'http://172.24.56.192:5000/start/portrait', // 后端服务的地址
    timeout: 150, // 请求超时时间
  })

const currencies = [
{
    value: 'male',
},
{
    value: 'female',
},
{
    value: 'other',
},
]

const currencies_exp = [
    {
        value: '无投资经验',
    },
    {
        value: '亏多赚少',
    },
    {
        value: '不亏不赚',
    },
    {
        value: '我是大佬',
    },
]
const currencies_risk = [
    {
        value: '保守',
    },
    {
        value: '理智',
    },
    {
        value: '偏激',
    },
]
const currencies_aim = [
    {
        value: '子女教育费,退休计划',
    },
    {
        value: '个人目标(如置业,购车)',
    },
    {
        value: '让财富保值增值',
    },
    {
        value: '其他',
    },
]
const currencies_tradeper = [
    {
        value: '定投',
    },
    {
        value: '跟随热门',
    },
    {
        value: '越跌越买',
    },
    {
        value: '大升即卖',
    },
    {
        value: '其他',
    },
]
const currencies_market = [
    {
        value: 'A股',
    },
    {
        value: '美股',
    },
    {
        value: '港股',
    },
    {
        value: '债券',
    },
    {
        value: '其他',
    },
]
const currencies_investsize = [
    {
        value: '0——1万',
    },
    {
        value: '1——10万',
    },
    {
        value: '10——30万',
    },
    {
        value: '30——50万',
    },
    {
        value: '50——100万',
    },
    {
        value: '100——1000万',
    },
    {
        value: '1000万以上',
    },
]
  
function Copyright(props) {
    return (
        <Typography
            variant="body2"
            color="text.secondary"
            align="center"
            {...props}
        >
            {'Copyright © '}
            <Link color="inherit" href="https://mui.com/">
                Your Website
            </Link>{' '}
            {new Date().getFullYear()}
            {'.'}
        </Typography>
    )
}

// TODO remove, this demo shouldn't need to reset the theme.

export default function User_info() {




    const handleSubmit = event => {
        event.preventDefault()
        const data = new FormData(event.currentTarget)
        console.log({
            email: data.get('Yourname'),
            password: data.get('yourgender'),
            cla : data.get('outlined-select-currency'),
        })

        axios.post('http://172.24.56.192:5000/start/portrait',data,{headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
            }})
              .then(function (response) {
                  // 这里是处理响应的代码
                 // var code = response['code']
                  if(response.data['code'] == 200)
                  {
                   
                    window.location.href="SignIn"
                    alert("success")
                  }
                  else{
                    if(response.data['code'] == 300)
                    {
                        window.location.href="UserInfo"
                        alert("有选项为空")
                    }                  
                  }
                  console.log(response);
                  
              })
              .catch(function (error) {
                  // 这里是处理错误的代码
                 // window.location.href="https://www.baidu.com/"
                  console.log(error);
                 
              })
    }
    return (
        
            
                
                <Box
                    sx={{
                        width: 1400,
                        height: 650,
                        marginTop: 0,
                        display: 'flex',
                        flexDirection: 'column',
                        alignItems: 'left',
                    }}
                    
                    
                >
                   
                    <Typography component="h1" variant="h3">
                        We want to know :
                    </Typography>
                    <img
                        //style={{ width: 600, height: 500 }}
                        src="\微信图片_20230529002715.png"
                        alt=""
                        className="absolute inset-0 -z-10 h-full w-full object-cover object-right md:object-center"
                    />
                    <Box
                        component="form"
                        noValidate
                        onSubmit={handleSubmit}
                        sx={{ mt: 6 }}
                    >
                        <Grid container spacing={2}>
                            <Grid item xs={3} sm={2}>
                                <TextField
                                    required
                                    fullWidth
                                    id="name"
                                    label="Your Name"
                                    name="YourName"
                                    autoComplete="30"
                                />
                            </Grid>
                            <Grid item xs={3} sm={2.5}>
                            <TextField
                                id="yourgender"
                                name="cla"
                                select
                                label="Gender"
                                defaultValue="EUR"
                                helperText="Please select your answer　　　　　　　"
                                >
                                {currencies.map((option) => (
                                    <MenuItem key={option.value} value={option.value}>
                                    {option.value}
                                    </MenuItem>
                                ))}
                            </TextField>
                            </Grid>
                            <Grid item xs={3} sm={2.5}>
                                <TextField
                                    required
                                    fullWidth
                                    id="email"
                                    label="Your email"
                                    name="email"
                                    autoComplete="30"
                                />
                            </Grid>
                            <Grid item xs={3} sm={2.5}>
                                <TextField
                                    required
                                    fullWidth
                                    id="age"
                                    label="Your Age"
                                    name="age"
                                    autoComplete="30"
                                />
                            </Grid>
                            <Grid item xs={6} sm={4}>
                            <TextField
                                id="riskper"
                                name="risk"
                                select
                                label="您的风险偏好"
                                defaultValue=""
                                helperText="Please select your answer　　　　　　　　　　　　　　　　　　　　　　"
                                >
                                {currencies_risk.map((option) => (
                                    <MenuItem key={option.value} value={option.value}>
                                    {option.value}
                                    </MenuItem>                                     
                                ))}
                            </TextField>
                            </Grid>

                            <Grid item xs={6} sm={5}>
                            <TextField
                                id="invest_size"
                                name="invest_size"
                                select
                                label="您的投资规模"
                                defaultValue=""
                                helperText="Please select your answer　　　　　　　　　　　　　　　　　　　　　　"
                                >
                                {currencies_investsize.map((option) => (
                                    <MenuItem key={option.value} value={option.value}>
                                    {option.value}
                                    </MenuItem>
                                ))}
                            </TextField>
                            </Grid>
                            <Grid item xs={6} sm={4}>
                            <TextField
                                id="invest_exp"
                                name="invest_exp"
                                select
                                label="您的投资经验"
                                defaultValue=""
                                helperText="Please select your answer　　　　　　　　　　　　　　　　　　　　　　"
                                >
                                {currencies_exp.map((option) => (
                                    <MenuItem key={option.value} value={option.value}>
                                    {option.value}
                                    </MenuItem>
                                ))}
                            </TextField>
                            </Grid>
                            <Grid item xs={6} sm={5}>
                            <TextField
                                id="trade_per"
                                name="trade_per"
                                select
                                label="您的交易偏好"
                                defaultValue=""
                                helperText="Please select your answer　　　　　　　　　　　　　　　　　　　　　　"
                                >
                                {currencies_tradeper.map((option) => (
                                    <MenuItem key={option.value} value={option.value}>
                                    {option.value}
                                    </MenuItem>
                                ))}
                            </TextField>
                            </Grid>
                            <Grid item xs={6} sm={4}>
                            <TextField
                                id="aim_market"
                                name="aim_market"
                                select
                                label="您最关注的股市"
                                defaultValue=""
                                helperText="Please select your answer　　　　　　　　　　　　　　　　　　　　　　"
                                >
                                {currencies_market.map((option) => (
                                    <MenuItem key={option.value} value={option.value}>
                                    {option.value}
                                    </MenuItem>
                                ))}
                            </TextField>
                            </Grid>
                            <Grid item xs={6} sm={5}>
                            <TextField
                                id="invest_aim"
                                name="invest_aim"
                                select
                                label="您的投资目标"
                                defaultValue=""
                                helperText="Please select your answer　　　　　　　　　　　　　　　　　　　　　　"
                                >
                                {currencies_aim.map((option) => (
                                    <MenuItem key={option.value} value={option.value}>
                                    {option.value}
                                    </MenuItem>
                                ))}
                            </TextField>
                            </Grid>


                        </Grid>
                        <Button
                            type="submit" 
                            variant="contained"
                            size='large'
                            sx={{ mt: 6, mb: 3 }}
                            className="text-black"
                        >
                            　　　提交　　　
                        </Button>
                    </Box>
                </Box>
               // <Copyright sx={{ mt: 5 }} />
            
        
    )
}
